<!--  -->
<template>
  <div class="">
    <el-dialog
      title="费用信息"
      :visible.sync="dialogVisible"
      width="65%"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="box-container">
        <div class="box-title">费用信息</div>
        <div class="box-th-container">
          <span class="box-th-item">公司名称：{{ info.companyName }}</span>
          <span class="box-th-item">费用类型：{{info.costType | costTypeFilter(that)}}</span>
          <span class="box-th-item">应缴金额(元)：{{ info.totalAmount }}</span>
          <span class="box-th-item">费用生成时间：{{ info.createDate }}</span>
        </div>
      </div>
      <div class="box-container">
        <div class="box-title">费用明细</div>
        <avue-crud
          ref="crud"
          :data="tableData"
          :table-loading="tableLoading"
          :option="tableOptionPayment1"
          v-if="costType == 1"
        >
        </avue-crud>
        <avue-crud
          ref="crud"
          :data="tableData"
          :table-loading="tableLoading"
          :option="tableOptionPayment2"
          v-if="costType == 2"
        >
        </avue-crud>
        <avue-crud
          ref="crud"
          :data="tableData"
          :table-loading="tableLoading"
          :option="tableOptionPayment3"
          v-if="costType == 3"
        >
        </avue-crud>
        <avue-crud
          ref="crud"
          :data="tableData"
          :table-loading="tableLoading"
          :option="tableOptionPayment4"
          v-if="costType == 4"
        >
        <template
          slot="isPayment"
          slot-scope="scope"
        >
          {{payments[scope.row.isPayment]}}
        </template>
        </avue-crud>

      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClose">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getDetail } from "@/api/cost/paymentscost";
import { getDicType } from "@/api/common";
import { tableOptionPayment1, tableOptionPayment2, tableOptionPayment3, tableOptionPayment4 } from '@/const/crud/cost/detail.js'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      that: this,
      dialogVisible: false,
      tableLoading:false,
      info: {},
      tableOptionPayment1,
      tableOptionPayment2,
      tableOptionPayment3,
      tableOptionPayment4,
      tableData: [],
      costType: 0,
      costTypeList:[],
      payments:[
        '否',
        '是',
        '支付中'
      ],
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  filters: {
    isNotNull(value) {
      if (value) {
        return value;
      } else {
        return "/";
      }
    },
    costTypeFilter (value, that) {
      let str = ''
      for (var i = 0; i < that.costTypeList.length; i++) {
        if (that.costTypeList[i].value == value) {
          str = that.costTypeList[i].label
          break
        }
      }
      return str
    }
  },
  // 方法集合
  methods: {
    handleClose() {
      this.dialogVisible = false;
    },
    init(row) {
      console.log(row);
      this.dialogVisible = true;
      this.info = row;
      switch(row.costType){
        //3 水费、4 电费
        case '3':
        case '4': this.costType = 1;break;
        //5 其他费用
        case '5': this.costType = 3;break;
        //6 停车费
        case '6': this.costType = 4;break;
        default:this.costType = 2;break;
      }
      let param={
        costType: row.costType,
        ids:row.id
      };
      console.log(param);
      getDetail(param).then(res => {
        this.tableData = res.data.data[0]
      })
      getDicType('cost_type').then(res => {
        this.costTypeList = res.data.data
      })
      // getDicType('payment_status').then(res => {
      //   this.paymentStatusOptions = res.data.data
      // })
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
.m-b {
  margin-bottom: 4px;
}
.w50 {
  width: 50%;
}
.red {
  color: #f00;
}
.b-r {
  border-left: 1px solid #fff;
}
.b-r1 {
  border-left: 1px solid rgba(170, 170, 170, 0.3);
}
.b-b {
  border-bottom: 1px solid rgba(170, 170, 170, 0.3);
}
.end-content {
  display: flex;
  justify-content: flex-end;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
}
.main-title-box {
  display: flex;
}
.main-container {
  display: flex;
}
.main-container-box {
  display: flex;
  flex-wrap: wrap;
  .mian-container-item {
    padding: 10px 10px 10px 10px;
    box-sizing: border-box;
    width: 50%;
  }
}
.mian-title {
  padding: 0 10px;
  box-sizing: border-box;
  background-color: rgba(170, 170, 170, 0.3);
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  color: #aaa;
  display: flex;
  justify-content: space-between;
  .main-tag {
    font-size: 12px;
    background-color: orangered;
    padding: 2px 4px;
    color: #fff;
    margin-left: 10px;
    border-radius: 2px;
  }
}
.box-title {
  height: 50px;
  line-height: 50px;
  background-color: rgba(215, 215, 215, 1);
  color: #7f7f7f;
  font-size: 16px;
  padding: 0 20px;
  font-weight: bold;

  &.bold {
    background-color: rgba(127, 127, 127, 1);
    color: #fff;
  }
}

.box-th-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 14px;
  color: #aaa;
  .box-th-item {
    width: 25%;
    margin: 15px 0 10px;
    &.red {
      color: #f00;
    }
  }
}
.common-title {
  height: 50px;
  line-height: 50px;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  font-size: 16px;
  .common-sn {
    margin-right: 30px;
    font-weight: bold;
  }
  .red {
    color: #f00;
  }
}
//@import url(); 引入公共css类
.itemAll {
  display: flex;
  flex-wrap: wrap;
  .items {
    width: 33%;
    padding: 10px 0px;
    display: flex;
    // align-items: center;
    span:first-child {
      width: 135px;
      text-align: right;
    }
    span:last-child {
      padding-left: 10px;
    }
  }
}
.bgc {
  background-color: aliceblue;
}
.header_title {
  margin-bottom: 15px;
  font-size: 16px;
  display: flex;
  flex-wrap: wrap;
  div {
    padding: 5px 20px;
    width: 25%;
  }
}
.urllist {
  display: flex;
  flex-wrap: wrap;
  .urlitem {
    padding: 0px 15px;
    img {
      width: 200px;
      height: 200px;
    }
  }
}
.editCar {
  margin-left: 10px;
  cursor: pointer;
}
.editCar:hover {
  color: blue;
}
</style>
